<template>
	<view class="feedback">
		<view class="scroll-h">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"
				@click="ontabtap">
				<text class="uni-tab-item-title"
					:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name || ''}}</text>
				<text v-show="tabIndex == index" class="uni-tab-item-text"></text>
			</view>
		</view>
		<swiper class="swiper" duration="300" :current="tabIndex" @change="ontabchange">
			<swiper-item>
				<view class="swiper-fankui">
					<view class="card" >
						<uni-card  title="问题和意见" :extra="lens+'/200'" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 40rpx'" :padding="0">
							<uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
							<uni-forms-item name="content">
								<uni-easyinput :clearable="false" type="textarea" maxlength="200" class="p-input" :inputBorder="false" focus v-model="valiFormData.content" placeholderStyle="font-size: 28rpx" placeholder="请输入您要反馈的问题，感谢您的支持~"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="反馈图片" required name="image" style="display: none;">
								<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.image" placeholder="请输入反馈图片" trim="both" />
							</uni-forms-item>
							</uni-forms>
						</uni-card>
						
						<uni-card title="图片（选填、提供问题截图）" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 40rpx'" :padding="0">
						    <view class="img" @click="addImg">
									<uni-grid v-if="fileLists.length" :column="4" :showBorder="false">
										<uni-grid-item  :key="index" v-for="(item,index) in fileLists">
											<image mode="scaleToFill" :src="item" style="width: 100%;height: 100%;" ></image>
										</uni-grid-item>
									</uni-grid>
									<uni-grid v-else :column="4" :showBorder="false">
										<uni-grid-item>
										<image class="main-img" mode="aspectFit" :src="imgUrl1" ></image>
										</uni-grid-item>
									</uni-grid>
							</view>
						</uni-card>
					</view>
					<view class="pay-but">
						<button class="but" plain @click="addClick('valiForm')">提交</button>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<template v-if="state">
				<view class="swiper-jilu" v-if="feedbackData.length != 0">
					<uni-card :key="item.id" v-for="item in feedbackData" :title="item.create_time" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0" >
					    <view slot="title" class="card-title">
					    	<text class="c-t-text">{{item.create_time || ''}}</text>
					    	<text class="c-t-text" :class="['c-t-text1','c-t-text2'][item.status]">{{['待回复','已回复'][item.status]}}</text>
					    </view>
						<uni-list :border="false">
					    	<uni-list-item :border="false">
								<view slot="header" class="slot-wt">问题：</view>
								<text slot="body" class="slot-wt text">{{item.content || ''}}</text>
							</uni-list-item>
							<uni-list-item :border="false" v-if="item.image.length">
								<image slot="body" mode="aspectFill" :src="item.image[0]" style="width: 160rpx;height: 160rpx;" @click="previewImage(item.image)"></image>
							</uni-list-item>
							<uni-list-item :border="false" v-if="item.status">
								<view slot="header" class="slot-hf">回复：</view>
								<text slot="body" class="slot-hf text">{{item.reply || ''}}</text>
							</uni-list-item>
					    </uni-list>
					</uni-card>
					<uni-load-more iconType="auto" :status="status" @clickLoadMore="clickLoadMore" :content-text="contentText" />
				</view>
				</template>
				<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;" v-else>
					<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
					<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
				</view>	
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl1:`${getApp().globalData.imgScr}jd/xiangji.png`,
				tabIndex: 0, // 顶部切换栏状态 0：反馈 1：反馈记录
				tabBars: [{ // 顶部切换栏 数据
					name: '反馈',
					id: 'fk'
				}, {
					name: '反馈记录',
					id: 'fkjl'
				}],
				valiFormData:{
					content:'', // 反馈类容
					image:'', // 反馈图片
				},
				// 校验规则
				rules: {
					content: {
						recruits: [{
							required: true,
							errorMessage: '意见不能为空'
						}]
					},
					},
				fileLists:[], // 图片上传 回显的数据列表
				feedbackData:[], //  反馈记录数据
				state:true, // 默认状态
				page:1, // 初始页码
				total:0, // 数据总条数
				status: 'more', // 加载状态
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				}
			};
		},
		onLoad() {
			// === 页面加载完毕后 给长期工渲染数据 ===
		},
		onPullDownRefresh() {
			let _this = this
			Object.assign(this.$data, this.$options.data())
			if(this.tabIndex == 1) {
				// 下拉刷新时触发
				    setTimeout(function () {
						uni.showToast({
							title:"刷新成功",
							icon:"none"
						})
						// 重置 data() 数据
						_this.getClick()
				        uni.stopPullDownRefresh();
				    }, 1000);
			}
			
		    },
		methods: {
			/**
			 * 顶部栏 切换时触发
			 * @param {object} e  获取切换元素的实例
			 */
			ontabtap(e) {
				console.log(e);
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				console.log(index);
				this.tabIndex = index;
			},
			/**
			 * 轮播图 页面切换时触发
			 * @param {Object} e 切换到的轮播图页面实例对象
			 */
			async ontabchange(e) {
				let _this = this
				let index = e.target.current || e.detail.current;
				this.tabIndex = index;
					if(index == 1 && this.feedbackData.length == 0) {
						this.getClick()
					}
				
			},
			/**
			 * 上传图片
			 * @param {Object} e 点击宫格获取宫格对应的数据
			 */
			addImg(e) {
				let _this = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        // 获取的格式是数组，多选会同时返回，单选只返回一项
						if(chooseImageRes.tempFiles[0].size > 1024 * 1024 * 10) return uni.showToast({
									title: '请选择 10M 以内的图片！',
									icon:"none"
								})
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						_this.fileLists = tempFilePaths
				        // // 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
				        uni.uploadFile({
				            // url: 'https://www.zhuoxianrenli.cn/index/hotelindex/uploadImage', //仅为示例，非真实的接口地址
				            url: `${getApp().globalData.url}index/hotelindex/uploadImage`, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
						header: {
						"Content-Type": "multipart/form-data",
						},
				            success: (uploadFileRes) => {
				                // 根据接口具体返回格式   赋值具体对应url
								_this.valiFormData.image = JSON.parse(uploadFileRes.data).file
				            },
							fail:(e) => {
								uni.showToast({
									title: e.errMsg,
									icon:"none"
								})
							}
				        });
				    }
				});
			},
			/**
			 * @param {arr} urls 需要预览的图片
			 */
			previewImage(urls) {
				uni.previewImage({
					urls,
					success: function(e) {
						
					},
					fail: function(e) {
					    uni.showToast({
					    	title: e.errMsg,
					    	icon:"none"
					    })
					}
				})
			},
			async addClick(ref) {
				let _this = this
				try {
					let res = await this.$refs[ref].validate()
					console.log('success', res)
					delete res.seat
					console.log('过滤后的数据',res)
					// let datas = JSON.stringify(res)
					// console.log('过滤后的数据',datas)
					let data = await this.$http.post('/index/Hotelpersonal/add_feedback',res)
					console.log('提交成功', data)
					_this.tabIndex = 1
				}catch (err) {
					if(err.length > 0) {
						uni.showToast({
							title: err[0].errorMessage,
							icon:"none"
						})
					} else if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore(e) {
				console.log(e.detail)
				if(e.detail = 'no-more') return this.status = 'no-more'
				this.status = 'loading'
				this.page += 1
				this.getClick(this.page)
			},
			/**
			 * 反馈记录请求数据
			 */
			async getClick(page=1,limit = 10) {
				let _this = this
				try{
					let res = await this.$http.post('/index/Hotelpersonal/feedback',{
						page:page,
						limit:limit,
					})
					this.feedbackData = [...this.feedbackData,...res.data]
					this.state = this.feedbackData.length
					this.total = res.total
					if(this.page >= res.last_page) return this.status = 'no-more'
					this.status = 'more'
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
		},
		computed:{
			lens: function() {
				return this.valiFormData.content.length
			}
		}
	}
</script>

<style lang="scss">
	.feedback {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	.scroll-h {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}

	.uni-tab-item {
		position: relative;
		flex: 1;
		display: inline-block;
		text-align: center;
	}

	.uni-tab-item-title {
		color: rgba($color: #000000, $alpha: 0.7);
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		opacity: 0.7;
	}
	.uni-tab-item-text {
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 4rpx;
		width: 36rpx;
		background: linear-gradient(255deg, #8dc9f1, #d8eefc);
		border-radius: 2rpx;
	}
	.uni-tab-item-title-active {
		color: #000000;
		font-size: 34rpx;
		font-weight: 600;
	}
	.uni-card {
		border-radius: 20rpx;
		.uni-card__header {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EDEDED;
			font-size: 28rpx;
			color: #000000;
			font-weight: 600;
		}
		.p-input {
			width: 100%;
		}
	}
	.swiper {
			height: calc(100% - 100rpx);
			.swiper-fankui {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 20rpx 0;
				height: 100%;
				.card {
					width: 100%;
					flex: 1;
					margin-bottom: 40rpx;
					overflow: auto;
					.uni-easyinput__content-textarea {
						height: 300rpx;
						font-size: 28rpx;
						color: #000000;
						padding: 20rpx 0;
					}
					.img {
						width: 100%;
						margin-bottom: 20rpx;
						.uni-grid-item__box {
							box-sizing: border-box;
							justify-content: center;
							align-items: center;
							padding: 20rpx;
						}
					}
					// .file-picker__box-content {
					// 	border: 0!important;
					// 	background-color: #F5F7FD;
					// 	display: flex;
					// 	flex-direction: column;
					// 	justify-content: center;
					// 	align-items: center;
					// }
					.main-img {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 10rpx;
					}
				}
				.pay-but {
					left: 0;
					width: 100%;
					height: 80rpx;
					margin-bottom: 20rpx;
					.but {
						color: #FFFFFF;
						background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
						border-radius: 40rpx;
						line-height: 80rpx;
						border: 0;
						margin: 0 20rpx;
					}
				}
			}
			.swiper-jilu {
				height: 100%;
				overflow: auto;
				.card-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1px solid #EDEDED;
					.c-t-text {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba($color: #000000, $alpha: 0.5);
					}
					.c-t-text1 {
						color: rgba($color: #000000, $alpha: 0.7);
					}
					.c-t-text2 {
						color: #8dc9f1;
					}
				}
				.slot-wt {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.uni-list-item {
					margin-bottom: 20rpx;
				}
				.uni-list-item__container {
					padding: 0;
				}
				.uni-list {
					padding: 20rpx 0;
				}
				.uni-card__header-content-title {
					font-size: 24rpx;
					color: rgba($color: #000000, $alpha: 0.5);
				}
				.text {
					flex: 1;
					margin-left: 20rpx;
				}
				.slot-hf {
					font-size: 24rpx;
					font-weight: 500;
					color: #8dc9f1;
				}
			}
		}
}	
</style>
